<template>
    <div class=" m-5 p-5 w-1/2 border-gray-100 border shadow-sm ">
        <h2 class="mb-10 text-purple-500 font-bold text-4xl font-mono">
            {{ car.band }}
        </h2>

        <table class="border-collapse border border-purple-300">
            <thead class=" bg-purple-100">
                <tr>
                    <th class="td-like w-1/5">描述</th>
                    <th class="td-like w-1/5">内容</th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <td class="td-like">品牌</td>
                    <td class="td-like">{{ car.band }}</td>
                </tr>
                <tr>
                    <td class=" td-like">型号</td>
                    <td class="td-like">{{ car.model }}</td>
                </tr>
                <tr>
                    <td class="td-like">价格</td>
                    <td class="td-like">{{ car.price }}</td>
                </tr>

            </tbody>
        </table>

        <button class="mt-10 py-2 px-10 bg-purple-500 hover:bg-purple-700 text-white rounded-md" type="button"
            @click="changePrice">砍价</button>
    </div>

</template>

<script setup lang="ts">
import useCar from './useCar';

const { car, changePrice } = useCar();

</script>

<style scoped>
.td-like {
    @apply border border-purple-300 p-5 text-center
}
</style>